<template>
	<view class="container">
		<view class="app_name">职多帮</view>
		<view class="user_account distance">
			<image src="../../static/img/login/account.png" mode=""></image>
			<input v-model="form.phone" class="uni-input" placeholder-style="color:#C5C5C5;font-size:28rpx" placeholder="请输入您的账号" />
		</view>
		<view class="user_account">
			<image src="../../static/img/login/pwd.png" mode=""></image>
			<input type="password" v-model="form.password" class="uni-input" placeholder-style="color:#C5C5C5;font-size:28rpx" placeholder="请输入您的密码" />
		</view>
		<view class="login_btn" @click="login">登录</view>
		<view class="bottom_btn">
			<navigator url="/pages/register/register"><view class="">注册账号</view></navigator>
			<view class="">忘记密码?</view>
		</view>
		<view class="line_account">
			<view class="left_line"></view>
			<view class="">社交账号登录</view>
			<view class="right_line"></view>
		</view>
		<image @click="wxlogin()" src="../../static/img/login/weixin.png" mode="" class="weixin_img"></image>
	</view>
</template>

<script>
	import tim from '../../common/tim/tim.js';
export default {
	data() {
		return {
			form: {
				phone: process.env.NODE_ENV ==='development'? '18030762265':'',
				password: process.env.NODE_ENV ==='development'? '123456':''
			},
			userinfo: [],
			wxform: {
				nickname: '',
				openid: '',
				unionid: '',
				headimgurl: ''
			}
		};
	},
	methods: {
		logined (userInfo) {
			console.log(userInfo)
			var config = tim.genTestUserSig(userInfo.id.toString());
			let promise = this.tim.login({
				userID: userInfo.id.toString(),
				userSig: config.userSig
			});
			console.log(this.tim)
			promise.then((res) => {
				//登录成功后 更新登录状态
				this.$store.commit("toggleIsLogin", true);
				//自己平台的用户基础信息
				uni.setStorageSync('userInfo', JSON.stringify(userInfo))
				//tim 返回的用户信息
				uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
				
			}).catch((err) => {
				console.warn('login error:', err); // 登录失败的相关信息
			});
		},
		login() {
			this.$utils.notoken({ url: 'login', data: this.form, type: 'post' }).then(res => {
				if (res.code === 1) {
					this.$utils.showLayer(res.message);
					uni.setStorage({
						key: 'userinfo',
						data: res.data
					});
					this.gettoken();
					uni.$emit("logined",res.data);
					this.logined(res.data)
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		},
		//微信登录
		wxlogin() {
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					console.log(loginRes.authResult);
					// 获取用户信息
					uni.getUserInfo({
						provider: 'weixin',
						success: infoRes => {
							// console.log('用户昵称为：'  + JSON.stringify(infoRes.userInfo));
							this.wxform.nickname = infoRes.userInfo.nickName;
							this.wxform.openid = infoRes.userInfo.openId;
							this.wxform.unionid = infoRes.userInfo.unionId;
							this.wxform.headimgurl = infoRes.userInfo.avatarUrl;
							this.$utils.notoken({ url: 'wxLogin', data: this.wxform, type: 'post' }).then(res => {
								if (res.code === 1) {
									this.$utils.showLayer(res.message);
									uni.setStorage({
										key: 'userinfo',
										data: res.data
									});
									this.wxgettoken();
									this.logined(res.data)
								} else {
									this.$utils.showLayer(res.message);
								}
							});
						}
					});
				}
			});
		},
		wxgettoken() {
			this.$utils.notoken({ url: 'getToken', type: 'post' }).then(res => {
				if (res.code === 1) {
					this.$utils.showLayer(res.message);

					uni.setStorage({
						key: 'token',
						data: res.data.accessToken
					});
					this.userinfo = uni.getStorageSync('userinfo');
					console.log(this.userinfo);
					uni.switchTab({
						url: '/pages/home/home'
					});
					// if (this.userinfo.boss != 0 || this.userinfo.worker != 0 || this.userinfo.driver != 0) {
					// 	uni.switchTab({
					// 		url: '/pages/myCenter/myCenter'
					// 	});
					// } else {
					// 	uni.navigateTo({
					// 		url: '/pages/selsectIdentity/selsectIdentity'
					// 	});
					// }
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		},

		gettoken() {
			this.$utils.notoken({ url: 'getToken', type: 'post' }).then(res => {
				if (res.code === 1) {
					// this.$utils.showLayer(res.message)
					uni.setStorage({
						key: 'token',
						data: res.data.accessToken
					});
					uni.switchTab({
						url: '/pages/myCenter/myCenter'
					});
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		}
	}
};
</script>
<style>
page {
	width: 100%;
	height: 100%;
}
</style>

<style scoped>
.container {
	width: 100%;
	height: 100%;
	background-image: url('../../static/img/login/backgroundimg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	text-align: center;
	padding-top: 300rpx;
	box-sizing: border-box;
}
.app_name {
	font-size: 104rpx;
	color: #ff9807;
	font-weight: bold;
	margin-bottom: 120rpx;
}
.user_account {
	width: 561rpx;
	height: 88rpx;
	text-align: center;
	line-height: 88rpx;
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	padding: 0 40rpx;
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: 15rpx;
	font-size: 28rpx;
	text-align: left;
}
.user_account image {
	width: 28rpx;
	height: 36rpx;
	margin-right: 36rpx;
}
input {
	width: 100%;
	font-size: 28rpx;
}
.distance {
	margin-bottom: 30rpx;
}
.login_btn {
	width: 560rpx;
	margin: 0 auto;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(0deg, rgba(255, 160, 8, 1), rgba(255, 131, 5, 1));
	box-shadow: 0px 9rpx 13rpx 0px rgba(110, 108, 108, 0.23);
	margin-top: 60rpx;
	font-size: 30rpx;
	color: #fff;
	border-radius: 88rpx;
	margin-bottom: 70rpx;
}
.bottom_btn {
	font-size: 22rpx;
	color: #333333;
	display: flex;
	justify-content: space-between;
	margin: 0 140rpx;
	margin-bottom: 50rpx;
}
.line_account {
	font-size: 22rpx;
	color: #9aacbd;
	display: flex;
	align-items: center;
	margin-left: 142rpx;
	margin-bottom: 50rpx;
}
.line_account .left_line {
	width: 145rpx;
	height: 1rpx;
	background-color: #f6f6f6;
	margin-right: 20rpx;
}
.line_account .right_line {
	width: 145rpx;
	height: 1rpx;
	background-color: #f6f6f6;
	margin-left: 20rpx;
}
.weixin_img {
	width: 57rpx;
	height: 57rpx;
}
</style>
